<!--
  功能：列表页面，分类列
  作者：陈广安
  时间：2023年07月26日 16:08:47
-->
<template>
  <el-table-column :label="label" :width="width">
    <template #default="scope">
      <div v-for="(v, i) in typeList" :key="i">
        <span
          class="tagColor"
          :style="{ background: tagColor[i] }"
          v-if="scope.row[field] == v.id"
          >{{ v.name }}</span
        >
      </div>
    </template>
  </el-table-column>
</template>

<script lang="ts" setup>
import type { typeItem } from "@/common/interface";
interface IProps {
  typeList: Array<typeItem>; //分类列表
  field?: string; //字段
  label?: string; //列 名称
  width?: string; //列 宽度
}
withDefaults(defineProps<IProps>(), {
  typeList: () => [],
  field: () => "type_id",
  label: () => "分类",
  width: () => "160",
});

const tagColor = [
  "#98635a",
  "#009688",
  "#0b6f91",
  "#497420",
  "#3c98a0",
  "#6e0045",
  "#409EFF",
  "#67C23A",
  "#E6A23C",
  "#F56C6C",
];
</script>

<style lang="scss" scoped>
.tagColor {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 5px;
  opacity: 0.6;
}
</style>
